@extends('Index/webpage/webpage_base')
@section('shop-con')
	<div class="content inner">
		<section class="item-show__div item-show__head clearfix">
			<div class="pull-left">
				<ol class="breadcrumb">
					<li><a href="/">首页</a></li>
					<li><a href="javascript:;">{{$class}}</a></li>
					<li class="active">{{$piece->name}}</li>
				</ol>
				<div class="item-pic__box" id="magnifier">
					<div class="small-box">
						<img class="cover" src="/upload/{{$piece->img}}" alt="">
						<span class="hover"></span>
					</div>
					<div class="thumbnail-box">
						<a href="javascript:;" class="btn btn-default btn-prev"></a>
						<div class="thumb-list">
							<ul class="wrapper clearfix">
								<li class="item active" data-src="/upload/{{$piece->img}}"><img class="cover" src="/upload/{{$piece->img}}" alt="商品预览图"></li>
							@foreach($imgs as $gimg)
								<li class="item" data-src="/upload/{{$gimg->img}}"><img class="cover" src="/upload/{{$gimg->img}}" alt="商品预览图"></li>
							@endforeach
							</ul>
						</div>

						<a href="javascript:;" class="btn btn-default btn-next"></a>
					</div>
					<div class="big-box"><img src="/upload/{{$piece->img}}" alt=""></div>
				</div>
				<script src="/index/js/jquery.magnifier.js"></script>
				<script>
					$(function () {
						$('#magnifier').magnifier();
					});
				</script>
				<div class="item-info__box">
					<div class="item-title">
						<div class="name ep2">{{$piece->name}}</div>
						<div class="sale cr">优惠活动：该商品暂无优惠</div>
					</div>
					<div class="item-price bgf5">
						<div class="price-box clearfix">
							<div class="price-panel pull-left">
								售价：<span class="price">￥{{$piece->price}} </span>
							</div>
						</div>
						<!-- <div class="c6">普通会员限购 2 件，想要<u class="cr"><a href="javescript:;">购买更多</a></u>？</div> -->
					</div>
					<ul class="item-ind-panel clearfix">
						<li class="item-ind-item">
							<span class="ind-label c9">累计销量</span>
							<span class="ind-count cr">{{$piece->sales}}</span>
						</li>
						<li class="item-ind-item">
							<span class="ind-label c9">累计评论</span>
							<span class="ind-count cr">{{$piece->cmt_count}}</span>
						</li>
						<!-- <li class="item-ind-item">
							<a href="/index/"><span class="ind-label c9">赠送积分</span>
							<span class="ind-count cg">666</span></a>
						</li> -->
					</ul>
					<div class="item-key">
						<div class="item-sku">
							<dl class="item-prop clearfix">
								<dt class="item-metatit">颜色：</dt>
								<dd><ul data-property="颜色" class="clearfix">
									@foreach($imgs as $gimg)
									<li><a class="" href="javascript:;" role="button" data-value="{{$gimg->color_i}}" aria-disabled="true">
										<span>{{$gimg->color_i}}</span>
									</a></li>
									@endforeach
								</ul></dd>
							</dl>
							<script>
								// 点击商品颜色
								$("ul[data-property='颜色'] li a").click(function(){
									index=$(this).parent().index()+1;
									// 选中当前颜色
									$(this).addClass('on').parent().siblings().children('a').removeClass('on');
									// 改变右侧图片
									$('.thumb-list ul li').eq(index).addClass('active').siblings().removeClass('active');
									$('#magnifier .small-box img').attr('src',$('.thumb-list ul li').eq(index).attr('data-src'));
									// 数据交互
									$.post('/index/webpage/changesize',{'gid':'{{$piece->id}}','color':$(this).children('span').html()},function(data){
										// console.log(data);
										// 改变商品颜色对应尺码
										$("ul[data-property='尺码']").empty();
										for(var i=0;i<data.length;i++){
											$("ul[data-property='尺码']").append("<li><a href='javascript:;' role='button' data-value='"+data[i].size+"' aria-disabled='true'><span>"+data[i].size+"</span></a></li>");
										}
										// 点击尺码
										$("ul[data-property='尺码'] li a").click(function(){
											$(this).addClass('on').parent().siblings().children('a').removeClass('on');
											// 改变库存
											var sindex=$(this).parent().index();
											$('#Stock').html(data[sindex].stock);
										})

									});

								});

							</script>
							<dl class="item-prop clearfix">
								<dt class="item-metatit">尺码：</dt>
								<dd><ul data-property="尺码" class="clearfix">
									@foreach($size as $slist)
									<li><a href="javascript:;" role="button" data-value="{{$slist}}" aria-disabled="true">
										<span>{{$slist}}</span>
									</a></li>
									@endforeach
								</ul></dd>
							</dl>
						</div>
						<div class="item-amount clearfix bgf5">
							<div class="item-metatit">数量：</div>
							<div class="amount-box">
								<div class="amount-widget">
									<input class="amount-input" value="1" maxlength="8" title="请输入购买量" type="text">
									<div class="amount-btn">
										<a class="amount-but add"></a>
										<a class="amount-but sub"></a>
									</div>
								</div>
								<div class="item-stock"><span style="margin-left: 10px;">库存 <b id="Stock">{{$stockall}}</b> 件</span></div>
								<script>
									$(function () {
										$('.amount-input').onlyReg({reg: /[^0-9]/g});
										var stock = parseInt($('#Stock').html());
										$('.amount-widget').on('click','.amount-but',function() {
											var num = parseInt($('.amount-input').val());
											if (!num) num = 0;
											if ($(this).hasClass('add')) {
												if (num > stock - 1){
													return DJMask.open({
													　　width:"300px",
													　　height:"100px",
													　　content:"您输入的数量超过库存上限"
												　　});
												}
												$('.amount-input').val(num + 1);
											} else if ($(this).hasClass('sub')) {
												if (num == 1){
													return DJMask.open({
													　　width:"300px",
													　　height:"100px",
													　　content:"您输入的数量有误"
												　　});
												}
												$('.amount-input').val(num - 1);
											}
										});
									});
								</script>
							</div>
						</div>
						<div class="item-action clearfix bgf5">
							<form action="/index/shopcart/udai_shopcart_pay" method="post" onsubmit="return pay()">
								<input type="hidden" name="method" value="direct_to_pay">
								<input type="hidden" name="gid">
								<input type="hidden" name="color">
								<input type="hidden" name="size">
								<input type="hidden" name="num">
								<button rel="nofollow" data-addfastbuy="true" title="点击此按钮，到下一步确认购买信息。" role="button" class="item-action__buy">立即购买</button>
							</form>
							<a href="javascript:;" rel="nofollow" data-addfastbuy="true" role="button" class="item-action__basket">
								<i class="iconfont icon-shopcart"></i> 加入购物车
							</a>
						</div>
						<script>
							function pay(){
								$('input[name="gid"]').val({{$piece->id}});
								$('input[name="color"]').val($("ul[data-property='颜色']").children('li').children("a[class='on']").attr('data-value'));
								$('input[name="size"]').val($("ul[data-property='尺码']").children('li').children("a[class='on']").attr('data-value'));
								$('input[name="num"]').val($("input[class='amount-input']").val());
								if($('input[name="gid"]').val() && $('input[name="color"]').val() && $('input[name="size"]').val() && $('input[name="num"]').val()){
									return true;
								}else{
									layer.msg('请选择商品规格');
									return false;
								}
							}
							$('.item-action__basket').click(function(){
								@if(Session::has('uid'))
									var color=$("ul[data-property='颜色']").children('li').children("a[class='on']").attr('data-value');
									var size=$("ul[data-property='尺码']").children('li').children("a[class='on']").attr('data-value');
									var num=$("input[class='amount-input']").val();
									var uid={{session('uid')}};
									var gid={{$piece->id}};
									if(gid && uid && color && size && num){
										// layer.msg(color+size);
										$.post('/index/shopcart/shopcart_insert',{'gid':gid,'uid':uid,'color':color,'size':size,'num':num},
											function(data){
												if(data==1){
													layer.msg('成功加入到购物车，你希望',{time:0,btn:['继续购物','去购物车结算'],
														yes:function(index){
															layer.close(index);
														},
														btn2:function(index){
															location.href='/index/shopcart/udai_shopcart';
														}
													});
												}else{
													layer.msg('出错了');
												}
											})
									}else{
										layer.msg('请选择商品规格');
									}
								@else
									location.href='/index/vip/login';
								@endif
								
							})
						</script>
					</div>
				</div>
			</div>
			<div class="pull-right picked-div">
				<div class="lace-title">
					<span class="c6">爆款推荐</span>
				</div>
				<div class="swiper-container picked-swiper">
					<div class="swiper-wrapper">
					@for($i=1;$i<'3';$i++)
						<div class="swiper-slide">
						@foreach($hotgoods as $hlist)
							@if($loop->index<'3'*$i && $loop->index>='3'*($i-1))
							<a class="picked-item" href="/index/webpage/item_show?id={{$hlist->id}}">
								<img src="/upload/{{$hlist->img}}" alt="" class="cover">
								<div class="look_price">¥{{$hlist->price}}</div>
							</a>
							@endif
						@endforeach
						</div>
					@endfor
					</div>
				</div>
				<div class="picked-button-prev"></div>
				<div class="picked-button-next"></div>
				<script>
					$(document).ready(function(){ 
						// 顶部banner轮播
						var picked_swiper = new Swiper('.picked-swiper', {
							loop : true,
							direction: 'vertical',
							prevButton:'.picked-button-prev',
							nextButton:'.picked-button-next',
						});
					});
				</script>
			</div>
		</section>
		<section class="item-show__div item-show__body posr clearfix">
			<div class="item-nav-tabs">
				<ul class="nav-tabs nav-pills clearfix" role="tablist" id="item-tabs">
					<li role="presentation" class="active"><a href="#detail" role="tab" data-toggle="tab" aria-controls="detail" aria-expanded="true">商品详情</a></li>
					<li role="presentation" style="border-right:1px solid #d1d1d1;"><a href="#evaluate" role="tab" data-toggle="tab" aria-controls="evaluate">累计评价 <span class="badge">1314</span></a></li> 
				</ul>
			</div>
			<div class="pull-left">
				<div class="tab-content">
					<div role="tabpanel" class="tab-pane fade active in" id="detail" aria-labelledby="detail-tab">
						{!!$piece->details!!}
					</div>
					<div role="tabpanel" class="tab-pane fade" id="evaluate" aria-labelledby="evaluate-tab">
						<div class="evaluate-tabs bgf5">
							<ul class="nav-tabs nav-pills clearfix" id="cmt_tab" role="tablist">
								<li role="presentation" class="active"><a href="#all" role="tab" data-toggle="tab" aria-controls="all" aria-expanded="false">全部评价 <span class="badge">1314</span></a></li>
								<li role="presentation"><a href="#good" role="tab" data-toggle="tab" aria-controls="good" aria-expanded="false">好评 <span class="badge">1000</span></a></li>
								<li role="presentation"><a href="#normal" role="tab" data-toggle="tab" aria-controls="normal" aria-expanded="false">中评 <span class="badge">314</span></a></li>
								<li role="presentation"><a href="#bad" role="tab" data-toggle="tab" aria-controls="bad" aria-expanded="false">差评 <span class="badge">0</span></a></li>
							</ul>
						</div>
						
						<div class="evaluate-content">
							<div class="tab-content cmt_list">
								<div role="tabpanel" class="tab-pane fade in active" id="all" aria-labelledby="all-tab">
								@foreach($comment as $clist)
									<div class="eval-box">
										<div class="eval-author">
											<div class="port">
												<img src="/index/images/icons/default_avt.png" alt="欢迎来到U袋网" class="cover b-r50">
											</div>
											<div class="name">{{$clist->username}}</div>
										</div>
										<div class="eval-content">
											<div class="eval-text">
												{{$clist->comment}}
											</div>
											<div class="eval-imgs">
											@foreach($cimgs[$loop->index] as $img)
												<div class="img-temp"><img src="/upload/{{$img}}" data-src="/upload/{{$img}}" data-action="zoom" class="cover"></div>
											@endforeach
											</div>
											<div class="eval-time">
												{{$clist->ctime}} 颜色分类：{{$clist->color}} 尺码：{{$clist->size}}
											</div>
											@if($clist->reply)
											<div>
												商家回复：{{$clist->reply}}
											</div>
											@endif
										</div>
									</div>
								@endforeach
									<!-- 分页 -->
									{{$comment->links()}}
								</div>
								<div role="tabpanel" class="tab-pane fade" id="good" aria-labelledby="good-tab">
								@foreach($comment as $clist)
									@if($clist->opinion=='G')
									<div class="eval-box">
										<div class="eval-author">
											<div class="port">
												<img src="/index/images/icons/default_avt.png" alt="欢迎来到U袋网" class="cover b-r50">
											</div>
											<div class="name">{{$clist->username}}</div>
										</div>
										<div class="eval-content">
											<div class="eval-text">
												{{$clist->comment}}
											</div>
											<div class="eval-imgs">
											@foreach($cimgs[$loop->index] as $img)
												<div class="img-temp"><img src="/upload/{{$img}}" data-src="/upload/{{$img}}" data-action="zoom" class="cover"></div>
											@endforeach
											</div>
											<div class="eval-time">
												{{$clist->ctime}} 颜色分类：{{$clist->color}} 尺码：{{$clist->size}}
											</div>
										</div>
									</div>
									@endif
								@endforeach
									<!-- 分页 -->
									
								</div>
								<div role="tabpanel" class="tab-pane fade" id="normal" aria-labelledby="normal-tab">
								@foreach($comment as $clist)
									@if($clist->opinion=='N')
									<div class="eval-box">
										<div class="eval-author">
											<div class="port">
												<img src="/index/images/icons/default_avt.png" alt="欢迎来到U袋网" class="cover b-r50">
											</div>
											<div class="name">{{$clist->username}}</div>
										</div>
										<div class="eval-content">
											<div class="eval-text">
												{{$clist->comment}}
											</div>
											<div class="eval-imgs">
											@foreach($cimgs[$loop->index] as $img)
												<div class="img-temp"><img src="/upload/{{$img}}" data-src="/upload/{{$img}}" data-action="zoom" class="cover"></div>
											@endforeach
											</div>
											<div class="eval-time">
												{{$clist->ctime}} 颜色分类：{{$clist->color}} 尺码：{{$clist->size}}
											</div>
										</div>
									</div>
									@endif
								@endforeach
									<!-- 分页 -->
									
								</div>
								<div role="tabpanel" class="tab-pane fade" id="bad" aria-labelledby="bad-tab">
								@foreach($comment as $clist)
									@if($clist->opinion=='B')
									<div class="eval-box">
										<div class="eval-author">
											<div class="port">
												<img src="/index/images/icons/default_avt.png" alt="欢迎来到U袋网" class="cover b-r50">
											</div>
											<div class="name">{{$clist->username}}</div>
										</div>
										<div class="eval-content">
											<div class="eval-text">
												{{$clist->comment}}
											</div>
											<div class="eval-imgs">
											@foreach($cimgs[$loop->index] as $img)
												<div class="img-temp"><img src="/upload/{{$img}}" data-src="/upload/{{$img}}" data-action="zoom" class="cover"></div>
											@endforeach
											</div>
											<div class="eval-time">
												{{$clist->ctime}} 颜色分类：{{$clist->color}} 尺码：{{$clist->size}}
											</div>
										</div>
									</div>
									@endif
								@endforeach
									<!-- 分页 -->
									
								</div>
							</div>
							<script src="/index/js/jquery.zoom.js"></script>
						</div>
					</div>
				</div>
				<script>
					$('ul#cmt_tab li').each(function(i){
						$(this).find('span').text($('.cmt_list').children().eq(i).children('.eval-box').length);
					})
					$('#item-tabs').find('li a span').text($('.cmt_list').children().eq(0).children('.eval-box').length);
				</script>
				<div class="recommends">
					<div class="lace-title type-2">
						<span class="cr">爆款推荐</span>
					</div>
					<div class="swiper-container recommends-swiper">
						<div class="swiper-wrapper">
						@for($i=1;$i<='2';$i++)
							<div class="swiper-slide">
							@foreach($hotgoods as $hlist)
								@if($loop->index<'5'*$i && $loop->index>='5'*($i-1))
								<a class="picked-item" href="/index/webpage/item_show?id={{$hlist->id}}">
									<img src="/upload/{{$hlist->img}}" alt="" class="cover">
									<div class="look_price">¥{{$hlist->price}}</div>
								</a>
								@endif
							@endforeach
							</div>
						@endfor
						</div>
					</div>
					<script>
						$(document).ready(function(){
							var recommends = new Swiper('.recommends-swiper', {
								spaceBetween : 40,
								autoplay : 5000,
							});
						});
					</script>
				</div>
			</div>
			<div class="pull-right">
				<div class="tab-content" id="descCate">
					<div role="tabpanel" class="tab-pane fade in active" id="detail-tab" aria-labelledby="detail-tab">
						<div class="descCate-content posr bgf5">
							<div class="lace-title">
								<span class="c6">最近浏览</span>
							</div>
							<div class="picked-box">
							@foreach($recgoods as $rlist)
								<a class="picked-item" href="/index/webpage/item_show?id={{$rlist->id}}">
									<img src="/upload/{{$rlist->img}}" class="cover">
									<div class="look_price">¥{{$rlist->price}}</div>
								</a>
							@endforeach
							</div>
						</div>
					</div>
					<div role="tabpanel" class="tab-pane fade" id="evaluate-tab" aria-labelledby="evaluate-tab">
						<div class="descCate-content posr bgf5">
							<div class="lace-title">
								<span class="c6">相关推荐</span>
							</div>
							<div class="picked-box">
							@foreach($corgoods as $clist)
								<a class="picked-item" href="/index/webpage/item_show?id={{$clist->id}}">
									<img src="/upload/{{$clist->img}}" class="cover">
									<div class="look_price">¥{{$clist->price}}</div>
								</a>
							@endforeach
							</div>
						</div>
					</div>
				</div>
			</div>
			<script>
				$(document).ready(function(){
					$('#descCate').smartFloat(0);
					$('.dc-idsItem').click(function() {
						$(this).addClass('selected').siblings().removeClass('selected');
					});
					$('#item-tabs a[data-toggle="tab"]').on('show.bs.tab', function (e) {
						$('#descCate #' + $(e.target).attr('aria-controls') + '-tab')
						.addClass('in').addClass('active').siblings()
						.removeClass('in').removeClass('active');
					});
				});
			</script>
		</section>
	</div>
@endsection